<template>
  <div class="button-wrap">
    <el-button type="text" @click="addFormVisible = true">
      <el-button type="primary">添加</el-button>
    </el-button>
    <!-- 添加面板 -->
    <el-dialog title="添加" :visible.sync="addFormVisible" width="30%" center>
      <span>账号：</span>
      <el-input
        v-model="account"
        clearable
        placeholder="请输入内容"
        style="width:75%;padding:10px 0 10px 56px;"
      ></el-input>
      <br />
      <span>名称：</span>
      <el-input v-model="name" placeholder="请输入内容" style="width:75%;padding:10px 0 10px 56px;"></el-input>
      <br />
      <span>类型：</span>
      <el-select v-model="type" placeholder="请选择" style="width:75%;padding:10px 0 10px 56px;">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <br />
      <span>备注信息：</span>
      <el-input v-model="remark" placeholder="请输入内容" style="width:75%;padding:10px 0 10px 28px;"></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addclick">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import md5 from "js-md5";
export default {
  data() {
    return {
      account: "", //账号
      name: "", //名称
      type: "", //类型
      password: "", //密码
      remark: "", //备注信息
      addFormVisible: false,
      value: "",
      options: [
        {
          value: "0",
          label: "大文类"
        },
        {
          value: "1",
          label: "大理类"
        }
      ],
      tableData: []
    };
  },
  methods: {
    addclick: function() {
      let _this = this;
      let editType = _this.type;
      var myreg = /^1[3456789]\d{9}$/;
      if (myreg.test(_this.account)) {
        _this.$http
          .post("/api/college/addCollegeUser", {
            account: _this.account,
            name: _this.name,
            password: md5(_this.account + "test123"),
            type: editType,
            remark: _this.remark
          })
          .then(function(response) {
            if (response.data.code === 0) {
              _this.addFormVisible = false;
              _this.connect();
              _this.$message.success("添加成功");
              _this.reset();
              
            } else {
              _this.$message.error(response.data.message);
            }
          })
          .catch(function(error) {
            console.log(error);
          });
      } else {
        _this.$message.error("您的账号不符合手机号码规范。");
      }
    },
    reset() {
      this.account = "";
      this.name = "";
      this.password = "";
      this.type = "";
      this.remark = "";
    },
    //向父组件发送更新请求
    connect() {
      this.$emit("listenEvent", 6);
    }
  }
};
</script>

<style scoped>
.button-wrap {
  margin: 5vh 0 6vh 4vw;
}
</style>
